import React, { Component } from 'react'
import '../assert/css/cate.css'
import { cateRequest, goodsRequest } from '../request/cate_request'
import Header from '../components/DefaultHeader'

export default class cate extends Component {
    constructor() {
        super()
        this.state = {
            cate_list: [],//商品分类
            active_id: 1,
            cate_name: "时令水果",
            goods_list: [] //分类商品
        }
    }
    componentWillUnmount() {
        this.setState = () => false //重置了setState
    }
    change_goods(active_id, cate_name) {
        this.setState({ active_id, cate_name })
        goodsRequest(active_id).then(
            res => {
                this.setState({ goods_list: res.list })
            }
        )
    }
    //请求数据
    UNSAFE_componentWillMount() {
        cateRequest().then(res => {
            this.setState({ cate_list: res.list })
            var obj = res.list[0]
            this.change_goods(obj.id, obj.catename)
        })
    }
    render() {
        const { cate_list, active_id, cate_name, goods_list } = this.state
        const { history } = this.props
        return (
            <div className="cate-container">
                <Header title='商品分类' />
                <div className="content">
                    <ul className="left">
                        {
                            cate_list.map(item => (
                                <li className={item.id === active_id ? "active" : ""} key={item.id} onClick={() => this.change_goods(item.id, item.catename)}>{item.catename}</li>
                            ))
                        }

                    </ul>

                    <ul className="right">
                        <li className="section">
                            <h3>{cate_name}<span onClick={() => history.push("/goods_list/?type_id=" + active_id + "&type_name=" + cate_name)} style={{ float: 'right', fontSize: 14, fontWeight: 'normal' }}>查看更多&gt;</span></h3>
                            <ul>
                                {
                                    goods_list.map(item => (
                                        <li key={item.id}>
                                            <img onClick={()=>this.props.history.push('/goods_detail/?id='+item.id)} src={this.pic_path + item.img} alt="" />
                                            <p>{item.goodsname}</p>
                                        </li>
                                    ))
                                }

                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
